<template>
  <div class="app-register">
    <AppHeader class="app-common__header" back title="注册第一步——验证手机号"></AppHeader>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
        v-model="tel"
        label="手机号"
        placeholder="手机号"
        type="tel"
        :rules="[{ validator: handleValidateTel }]"
        />
     </van-cell-group>
      <div style="margin: 16px;">
          <van-button :disabled="!canNext" round block type="primary" native-type="submit">
          下一步
          </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts" setup>
import {ref,computed} from 'vue'
import {phoneReg} from '@/utils/common'
import type { FieldRuleValidator } from 'vant';
import {useRouter} from 'vue-router'
import {isRegisterApi} from '@/api/register'
const tel=ref<string>('')
const router=useRouter()
const handleValidateTel:FieldRuleValidator=(val:string)=>{
  if(!val)return '手机号不能为空'
  if(!phoneReg.test(val)) return '手机号格式不正确'
  return true
}
const canNext=computed(()=>{
    if(!tel.value)return false
    if(!phoneReg.test(tel.value))return false
    return true
})
const onSubmit=async()=>{
// 验证手机号是否已注册
// 利用编程式导航跳转,不能是routerlink
try {
  const data=await isRegisterApi(tel.value)
  router.push({name:'registertwo',query:{tel:tel.value}})
} catch (error) {
}

}
</script>